<!--
*@Author: zt
*@Description: 动态表单创建
*@Date: 2024-09-10 
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-table-header>
      <u-form
        :model="searchF"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)"
      >
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch">查询</u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="add" @click="showEdit = true">
                新增
              </u-icon-button>
              <u-icon-button itype="edit" @click="showEditClick">
                修改
              </u-icon-button>

              <u-icon-button itype="delete" @click="deleteBtn">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="onDblclick"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
      ></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :keyid="keyid"
    @success="getSearch(1), (showEdit = false), (keyid = '')"
    @close="getSearch(1), (showEdit = false), (keyid = '')"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import { ColProps, FormItemProps, TableColumnProps } from 'ant-design-vue';
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import { formatAmt } from '@/util/format.ts'
import { isSel } from '@/common/model/base';
import { cloneDeep } from 'lodash';
import { useTableScroll } from '@/hooks/useTable';
import { alertC, messageC, numberC } from '@/util/common';
import { storeToRefs } from 'pinia';
import { useBaseStore } from '@/store';
import { otherEventBus } from '@/util/eventBus';
import dayjs from 'dayjs';
import Edit from './edit.vue';
import EditRow from './editRow.vue';
import * as dynamicReportApi from '@/service/emergency/dynamicReport';
import * as dynamicFormsApi from '@/service/emergency/dynamicForms/index';

const route = useRoute();
const router = useRouter();
const { ISPROXY } = storeToRefs(useBaseStore());
let keyid = ref('');

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
let searchF = reactive<any>({
  model: {},
});
const tabSelData = ref<any[]>([]);
let showEditRow = ref(false);
const formItemProps: FormItemProps = {
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '模块名称',
    key: 'keywords',
    element: 'input',
    col: { span: 5 },
    formItemProps: {
      ...formItemProps,
      labelWidth: '80px',
    },
  },
];

// 列表
let tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: 'modulename', title: '模块名称', width: 150, align: 'center' },

  {
    dataIndex: 'createtime',
    title: '创建时间',
    width: 150,
    align: 'center',
    customRender: ({ text }) => {
      return (text || '').split(' ')[0];
    },
  },
  {
    dataIndex: 'ishaveaudit',
    title: '关联审核',
    width: 150,
    align: 'center',
    customRender: ({ text }) => {
      if (text == 0) {
        return '否';
      } else {
        return '是';
      }
    },
  },
]);

// 查询数据
const getSearch = async (index?) => {
  let tform = JSON.parse(JSON.stringify(searchF));
  tform.model.keywords = searchF.keywords;
  if (index == 1) {
    pagenation.current = 1;
  }
  tform.current = pagenation.current;
  tform.size = pagenation.pageSize;
  const res = await dynamicFormsApi.page({ ...tform });
  if (res.code == 0) {
    tabData.value = res.data.records;
  }
};

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    alertC('请先选择要删除的数据!', 'warning');
    return;
  }
  let ids = tabSelData.value.map(item => item.keyid);
  alertC('确认删除选中的数据?', 'confirm').then(async () => {
    try {
      const res = await dynamicFormsApi.del({ ids: ids.join(',') });

      if (res.code == 0) {
        otherEventBus.emit('updateMenu');
        getSearch(1);
        messageC(res.msg, 'success');
      } else {
        alertC(res.msg, 'warning');
      }
    } catch (error) {}
  });
};

//编辑打开事件
const showEditClick = () => {
  if (tabSelData.value.length !== 1) {
    alertC('能且只能选择一条数据', 'warning');
    return;
  }
  keyid.value = tabSelData.value[0]['keyid'];
  showEdit.value = true;
};

//行双击
const onDblclick = record => {
  keyid.value = record['keyid'];
  showEdit.value = true;
};

//填报列表数据展示

// const onDblclick = (record) => {
//   keyid.value = record['keyid']
//   showEditRow.value = true
// }

//查看报表数据
const pushClick = () => {
  if (tabSelData.value.length !== 1) {
    alertC('能且只能选择一条数据', 'warning');
    return;
  }
  keyid.value = tabSelData.value[0]['keyid'];
  showEditRow.value = true;
};

onMounted(async () => {
  await getSearch(1);
});

// 编辑
let dialogTitle = ref<string>('创建任务');
let dialogRowTitle = ref<string>('表数据');

let showEdit = ref<boolean>(false);

// 导入
let showImp = ref<boolean>(false);

const toEdit = () => {
  showEdit.value = true;
};

defineExpose({
  toEdit,
});
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
